<template>
	<view class="">
		<!-- <NavBar title="数据统计"></NavBar> -->
		<view class="Statistics">
			<view class="statisticsTable tn-margin-bottom-sm tn-padding-left-xs tn-padding-right-xs">
				<view class="" :style="{'width': 750+(750/2)*shujuData[0].product.length+'rpx'}">
					<view class="tableHeader tn-flex">
						<view class="tdw tn-flex tn-flex-col-center tn-flex-row-center">
							<text>序号</text>
						</view>
						<!-- <view class="tdw tn-flex tn-flex-col-center tn-flex-row-center">
							<text>微信名</text>
						</view> -->
						<view class="tdw tn-flex tn-flex-col-center tn-flex-row-center">
							<text>姓名</text>
						</view>
						<view class="tdw tn-flex tn-flex-col-center tn-flex-row-center">
							<text class="tn-margin-left-xs tn-margin-right-xs">联系电话</text>
						</view>
						<view class="tn-flex tn-flex-direction-column tn-flex-col-center"
							v-for="v in shujuData[0].product" :key="v.pro_id">
							<view
								class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center tn-border-solid tn-none-border-bottom"
								style="width: 100%;">
								<text>{{v.name}}</text>
							</view>
							<view class="tdw tn-flex-1 tn-flex tn-border-solid-top tn-none-border-bottom">
								<view
									class="tdw tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center tn-none-border-bottom">
									<text>需求</text>
								</view>
								<view
									class="tdw tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center tn-none-border-bottom">
									<text>预算</text>
								</view>
								<view
									class="tdw tn-flex-2 tn-flex tn-flex-row-center tn-flex-col-center tn-none-border-bottom">
									<text>需求备注</text>
								</view>
							</view>
						</view>
					</view>
					<view class="tn-flex" style="height: 70rpx;" v-for="v,i in shujuData" :key="v.id">
						<view class="tdw tn-flex tn-flex-col-center tn-flex-row-center">
							<text>{{i+1}}</text>
						</view>
						<!-- <view class="tdw tn-flex tn-flex-col-center tn-flex-row-center">
							<text>{{v.nickname}}</text>
						</view> -->
						<view class="tdw tn-flex tn-flex-col-center tn-flex-row-center">
							<text>{{v.name}}</text>
						</view>
						<view class="tdw tn-flex tn-flex-col-center tn-flex-row-center">
							<text class="tn-margin-left-xs tn-margin-right-xs">{{v.phone}}</text>
						</view>
						<view class="tn-flex tn-flex-direction-column tn-flex-col-center" v-for="v2 in v.product"
							:key="v2.pro_id">
							<view class="tdw tn-flex-1 tn-flex">
								<view
									class="tdw tn-flex-1 tn-flex tn-flex-row-center tn-text-ellipsis tn-flex-col-center">
									<text>{{v2.xuqiu||''}}</text>
								</view>
								<view
									class="tdw tn-flex-1 tn-flex tn-flex-row-center tn-text-ellipsis tn-flex-col-center">
									<text>{{v2.yusuan||''}}</text>
								</view>
								<view
									class="tdw tn-flex-2 tn-flex tn-flex-row-center tn-text-ellipsis tn-flex-col-center">
									<text>{{v2.beizhu||''}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-bottom tn-padding-left tn-padding-right">
				<text class="tn-text-xl">投标商家</text>
				<text class="tn-text-md" v-if="touListData.length>0">剩余确认时间:{{touListData[0].endtime}}小时</text>
				<text class="tn-text-md" v-else>未有商家投标</text>
			</view>
			<view class="business tn-padding-xs">
				<view class="tn-margin-bottom-xs" v-for="v in touListData" :key="v.id">
					<text class="tn-margin-left-sm tn-text-bold">{{v.user.bus_name}}</text>
					<view class="tn-flex tn-flex-row-between tn-border-solid"
						style="background-color: #ffffff;height: 100rpx;">
						<view class="tn-flex-1 tn-flex tn-padding-xs tn-flex-direction-column" style="width: 80%;">
							<view class="tn-flex-1 tn-flex tn-flex-row-between tn-flex-col-center">
								<text class="tn-text-ellipsis">地址:{{v.user.bus_address}}</text>
								<text>14.6M</text>
							</view>
							<view class="tn-flex-1 tn-flex tn-flex-row-between tn-flex-col-center">
								<text>店长:{{v.user.bus_lianxiren}}</text>
								<text :style="{'color':v.status?'#3d3d3d':'#ff1313'}">{{v.user.bus_phone}}</text>
								<text></text>
							</view>
						</view>
						<view style="width: 120rpx;"
							:style="{'background-color':v.status?'#b5b5b5':'#ff1313','color':v.status?'#fff':'#fbff00'}"
							class="tn-flex tn-flex-row-center tn-flex-col-center" @click="revStatus(v)">
							<text>{{v.status?'对接中':'待对接'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm tn-margin-top-sm tn-text-xl"
					v-if="touListData.length>0">
					<text class="tn-flex-1 tn-text-bold">我的组织礼金</text>
					<text class="tn-flex-1 tn-flex tn-flex-col-center">{{touListData[0].yongjin}}元<text
							class="tn-text-sm">({{['','一','二','三','四','五'][touListData[0].dengji-0]}}级)</text></text>
					<text class="tn-flex-1">{{['未完成','待转账','已转账'][touListData[0].toustatus-0]}}</text>
				</view>
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm tn-margin-top-sm"
					v-else>
					<text class="tn-flex-1">我的组织礼金</text>
					<text class="tn-flex-2 tn-text-md">未有商家投标</text>
				</view>
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm tn-margin-top-sm">
					<text class="tn-flex-1"></text>
					<text class="tn-flex-2 tn-text-md">三家以上商家确认（是）方可获赠礼金</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import NavBar from '../../components/NavBar/NavBar.vue'
	import {
		touListApi,
		shujuApi,
		updateStatusApi
	} from '../../apis/StatisticsApi.js';
	import {
		useToTel
	} from '../../utlis/hook.js';
	export default {
		components: {
			// NavBar
		},
		data() {
			return {
				isDocking: false,
				touListData: [],
				shujuData: [],
				j_id: 0
			};
		},
		onLoad(props) {
			this.j_id = props.id;
			let _data = {
				j_id: props.id
			};
			this.touListInit(_data);
			shujuApi(_data).then(res => {
				if (res.data.msg == "成功") {
					this.shujuData = res.data.data;
				}
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			revStatus(v) {
				console.log(v)
				if (v.status != 0) {
					return
				}
				let _data = {
					j_id: this.j_id,
					u_id: v.user.u_id
				}
				let _j_id = {
					j_id: this.j_id
				}
				updateStatusApi(_data).then(res => {
					console.log(res)
					if (res.data.msg == '成功') {
						this.touListInit(_j_id);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			touListInit(_data) {
				touListApi(_data).then(res => {
					if (res.data.msg == '成功') {
						res.data.data.forEach(v => {
							if (v.status == 0) {
								v.user.bus_phone = useToTel(v.user.bus_phone)
							}
						})
						this.touListData = res.data.data;
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Statistics {
		width: 750rpx;

		.statisticsTable {
			height: 50vh;
			background-color: #f7f7f7;
			border: 1px solid #d4d4d4;
			border-radius: 20rpx;
			overflow: scroll;

			.tableHeader {
				width: 100%;
				height: 100rpx;

				&>view {
					height: 100%;
					font-weight: 600;

					// &:first-child {
					// 	border-left: none;
					// }

					// &:last-child {
					// 	border-right: none;
					// }
				}
			}

			.tdw {
				width: 300rpx;
				border: 1rpx solid #d4d4d4;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.business {
			width: 100%;
			background-color: #f7f7f7;
			border: 1px solid #d4d4d4;
			border-radius: 20rpx;
			height: 600rpx;
			overflow-y: scroll;
		}
	}
</style>
